<template>
  <div :class="['archive-card__item',{'archive-card__item-hide': show}]" v-if="!show">
    <el-image :src="cover" class="archive-cover__item" draggable="false" fit="cover">
      <div class="archive-cover__item-error" slot="error">没有上传封面</div>
    </el-image>
    <div class="archive-card-info__group">
      <div class="archive-title__item">
        <el-tag :type="stateTag.type" size="mini">{{ stateTag.name }}</el-tag>
        <a
          :href="archiveLink"
          :title="archiveTitle"
          class="title__item"
          draggable="false"
          target="_black"
        >{{ archiveTitle }}</a>
      </div>
      <div class="archive-post-time__item">{{ postTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
      <metaModule :archive="archive" />
      <span class="archive-id__item">aid: {{ archiveID }}</span>
    </div>
    <div class="archive-card-right__group">
      <slot>
        <controllerModule @btnTouch="controllerBtnTouchHandler" @delete="deleteHandler" />
      </slot>
    </div>
  </div>
</template>

<script>
import metaModule from './components/meta.vue';
import controllerModule from './components/controller.vue';

export default {
    components: {
        metaModule,
        controllerModule,
    },
    props: {
        index: {
            type: Number,
            required: true,
        },
        archive: {
            type: Object,
            required: true,
        },
        link: {
            type: String,
            default: '',
        },
    },
    computed: {
        archiveID() {
            return this.archive.aid;
        },
        archiveType() {
            return this.archive.type;
        },
        show() {
            return this.archive.isDelete;
        },
        cover() {
            return this.archive.cover;
        },
        stateTag() {
            const arr = [
                { type: 'info', name: '编辑中' },
                { type: 'warning', name: '审核中' },
                { type: 'success', name: '已通过' },
                { type: 'danger', name: '未通过' },
            ];
            const { state } = this.archive;
            return arr[state];
        },
        archiveLink() {
            return this.link || 'https://www.baidu.com';
        },
        archiveTitle() {
            return this.archive.title || '未填写标题';
        },
        postTime() {
            return new Date(this.archive.created_at);
        },
    },
    methods: {
        controllerBtnTouchHandler(Bcode) {
            this.$emit('btnTouch', Bcode, this.archive);
        },
        deleteHandler() {
            this.$emit('delete', this.archiveID, this.archive);
        },
    },
};
</script>

<style lang="scss">
$coverHeight: 100px;
$coverWidht: $coverHeight * (16 /10);

.archive-card__item {
  margin-bottom: 20px;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  &.archive-card__item-hide {
    transform-origin: center top;
    animation: archiveListHide 1s forwards;
  }

  .archive-cover__item {
    width: $coverWidht;
    height: $coverHeight;
    border-radius: 4px;
    box-shadow: 0 0 1px #000;
    flex-shrink: 0;
    &-error {
      width: $coverWidht;
      height: $coverHeight;
      line-height: $coverHeight;
      text-align: center;
      font-size: 12px;
      color: $textGrey;
      background-color: #f5f7fa;
    }
  }

  .archive-card-info__group {
    width: calc(100% - 230px);
    margin-left: 10px;
    .archive-title__item {
      font-size: 18px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      .title__item {
        margin-left: 20px;
        transition: color 0.2s;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .title__item:hover {
        color: $menuActiveText;
      }
    }
    .archive-post-time__item {
      font-size: 12px;
      color: #99a2aa;
      padding: 20px 0;
    }
    .archive-id__item {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 12px;
      color: $textGrey;
      transform: scale(0.8);
    }
  }

  .archive-card-right__group {
    position: absolute;
    right: 10px;
  }
}
// 属于组件订制动画 也没必要放到全局吧
@keyframes archiveListHide {
  100% {
    transform: translateX(300px);
    opacity: 0;
  }
}
</style>
